<script setup lang="ts">

import Footer from "@/views/edu/comm/Footer.vue";
import Search from "@/views/edu/comm/Search.vue";
import TopHeader from "@/views/edu/comm/TopHeader.vue";
</script>
<template>
  <!--顶部组件 Start-->
  <TopHeader/>
  <!--顶部组件 end-->
  <!--搜索组件 start-->
  <Search/>
  <!--搜索组件 end-->
  <!--中间内容 start-->
  <!--列表类型 start-->
  <div class="edu-list-filter">
    <div class="edu-container">
      <el-card>
        <template #header>
          <div class="card-header">
            <el-breadcrumb separator="/">
              <el-breadcrumb-item :to="{path: '/'}">首页</el-breadcrumb-item>
              <el-breadcrumb-item :to="{path: '/edu/list'}">类别</el-breadcrumb-item>
              <el-breadcrumb-item><cite>全部</cite></el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </template>

        <div class="edu-card-body">
          <!--课程类型 start-->
          <div class="lesson-cat-item">
            <span><el-icon style="margin-right: 12px;"><ArrowRight /></el-icon>类别：</span>
            <ul>
              <li :class="{'active':activeStatus==0}">
                <a href="javascript:void(0);" @click="searchLessonType(null)">全部</a>
              </li>
              <li :class="{'active':activeStatus==item.id}" v-for="item in lessonTypeList">
                <a href="javascript:void(0);" @click="searchLessonType(item.id)">{{item.typeName}}</a>
              </li>
            </ul>
          </div>
          <!--课程类型 end-->


          <!--教师 start-->
          <div class="lesson-cat-item">
            <span><el-icon style="margin-right: 12px;"><Memo/></el-icon>教师：</span>
            <ul>
              <li :class="{'active':teacherStatus==0}">
                <a href="javascript:void(0);" @click="searchTeacher(null)">全部</a>
              </li>

              <li :class="{'active':teacherStatus==item.id}" v-for="item in teacherList">
                <a href="javascript:void(0);" @click="searchTeacher(item.id)">{{item.teacherName}}</a>
              </li>

            </ul>
          </div>
          <!-- 教师 end -->

          <p class="filter-end">筛选出<span>{{total}}</span>个</p>
        </div>
      </el-card>
    </div>
  </div>
  <!--列表类型 end-->

  <!--课程内容列表  start-->
  <div class="edu-lesson-list">
    <div class="edu-lesson-normal">
      <div class="edu-container">
        <el-row :gutter="20">
          <template v-for="item in lessonList">
            <el-col :span="6" style="padding:10px;">
              <router-link target="_blank" class="lesson-list-box" :to="'/edu/details/'+item.id">
                <img :src="url+'uploadFile/'+item.lessonImg" class="lesson-list-cover">
                <h2>{{item.lessonName}}</h2>
                <div>
                  <div class="lesson-list-colorbar">
                    <span class="lesson-color-bar" >{{item.eduLessonType.typeName}}</span>
                    <span class="lesson-color-bar" >{{item.eduTeacher.teacherName}}</span>
                  </div>
                </div>

              </router-link>
            </el-col>
          </template>
        </el-row>
      </div>
    </div>

    <!--分页 start-->
    <el-pagination background layout="total,prev,pager,next,jumper" :total="total"
                   v-model:page-size="pageSize" @current-change="changePage"/>
    <!--分页 end-->

  </div>
  <!--课程内容列表  end-->

  <!--中间内容 end-->
  <!--底部组件 start-->
  <Footer/>
  <!--底部组件 end-->
</template>

<style scoped>

</style>
